<template>
    <div>
        <bar text="转化率排行榜"></bar>
        <div class="content">
            <div class="titleBar" style="margin-bottom: 23px">
                <titles text="店铺转化率排行榜" style="margin-top: 5px"></titles>
                <div style="display: flex;justify-content: center">
                    <div style="margin-left: 10px">
                        <el-select v-model="value2" placeholder="今天" @change="selectGet2(value2)">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value2"
                                    :label="item.label"
                                    :value="item.value2">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="shopLevel" v-for="(item,index) in shopLevel" :key="index + '-only'" @click="btnMap(item.fid,item.floor)">
                <div style="display: flex;justify-content: flex-start;">
                    <div class="icon" v-if="index == 0">
                        <img src="../../assets/imgs/home/top.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else-if="index == 1">
                        <img src="../../assets/imgs/home/mind.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else-if="index == 2">
                        <img src="../../assets/imgs/home/down.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else>
                        <p>{{index + 1}}</p>
                    </div>
                    <div class="shopInfo" style="display: flex;justify-content: flex-start">
                        <div class="shopIcon">
                            <img :src="item.pic_url"
                                 style="width: 100%;height: 100%;border-radius: 50%;" alt/>
                        </div>
                        <div style="margin-top: -20px;margin-left: 15px">
                            <div class="shopName" style="font-size:13px;text-align: left">{{item.name}}</div>
                            <div class="shopName" style="font-size:12px;display: flex;justify-content: flex-start">
                                <p style="margin-right: 5px">客流量：{{item.flow}}</p>
                            </div>
                            <div class="shopName" style="font-size:12px;display: flex;justify-content: flex-start">
                                <p>销售额：{{item.salevolume}}万</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <p style="font-size:12px;line-height: 26px; margin-top: -10px;">转化率</p>
                    <p style="font-size:11px;color: #E04F49">{{item.rate}}%</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import bar from "../../components/topBar";
    import titles from "../../components/titleBar";
    import scoll from "../../components/demo";

    export default {
        name: "conversion",
        components: {
            bar,
            titles,
        },
        data() {
            return {
                shopLevel: [],
                options2: [{
                    value2: '0',
                    label: '今天'
                }, {
                    value2: '1',
                    label: '本月'
                }, {
                    value2: '2',
                    label: '本年'
                }],
                value2: '0',
                counter: 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
                num: 15,  // 一次显示多少条
                pageStart: 0, // 开始页数
                pageEnd: 0, // 结束页数
                listdata: [], // 下拉更新数据存放数组
                downdata: [],  // 上拉更多的数据存放数组
                scale:0.5,
            };
        },
        computed: {
            // scaleFun: function () {
            //     var scale = this.scale;
            //     return `transform:scale(${scale})`
            // }
        },
        created() {
        },
        mounted() {
            this.getData()
        },
        methods: {
            btnMap(fid,floor){
                // alert(floor)
                this.$router.push({path: "/map", query: {type: 4,fid:fid,floor:floor}})
            },
            selectGet2(value2) {//这个vId也就是value值
                console.log(value2);
                this.time = value2
                this.$options.methods.getData.bind(this)();
            },
            handleCommand(command) {
                // this.$message('click on item ' + command);
            },
            getData() {
                this.$api.get('market/store/translist?time=' + this.value2, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data.data);
                        this.shopLevel = response.data.data
                        this.listdata = response.data.slice(0, 15);
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            onRefresh(done) {
                this.getData();

                done() // call done

            },
            onInfinite(done) {
                let vm = this;
                vm.$http.get('market/store/translist?time=' + this.value2).then((response) => {
                    vm.counter++;
                    vm.pageEnd = vm.num * vm.counter;
                    vm.pageStart = vm.pageEnd - vm.num;
                    let arr = response.data;
                    let i = vm.pageStart;
                    let end = vm.pageEnd;
                    for (; i < end; i++) {
                        let obj = {};
                        obj["name"] = arr[i].name;
                        vm.downdata.push(obj);
                        if ((i + 1) >= response.data.length) {
                            this.$el.querySelector('.load-more').style.display = 'none';
                            return;
                        }
                    }
                    done() // call done
                }, (response) => {
                    console.log('error');
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    /deep/ .el-input__icon {
        line-height: 26px;
    }

    /deep/ .el-input--suffix .el-input__inner {
        width: 110px;
        height: 26px;
        font-size: 16px;
        line-height: 26px;
    }

    .content {
        padding: 10px 15px;
        box-sizing: border-box;
        /*background-color: #42b983;*/
        /*height: 500px;*/

        .titleBar {
            /*height: 58px;*/
            display: flex;
            justify-content: space-between;
            /*align-items: center;*/
        }

        .shopLevel {
            width: 345px;
            height: 64px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 6px 0px rgba(228, 228, 230, 0.5);
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            padding: 23px 13px;
            box-sizing: border-box;
            margin-bottom: 10px;

            .icon {
                width: 25px;
                height: 20px;
            }

            .shopInfo {
                margin-left: 13px;

                .shopIcon {
                    width: 37px;
                    height: 37px;
                    border-radius: 50%;
                    margin-top: -10px;
                }

                .shopName {
                    font-size: 13px;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                    line-height: 20px;
                }
            }
        }
    }
</style>
